<template>
  <div>
    <Form :model="searchObj" :label-width="80" inline>
      <FormItem label="活动主题:">
        <Input v-model="searchObj.activity_theme" clearable placeholder="请输入活动主题"/>
      </FormItem>
      <Button type="success" @click="searchAction" class="btn-style"><Icon type="ios-search"/>搜索</Button>
      <Button type="primary" @click="addActivity"><Icon type="md-add"/>添加</Button>
    </Form>
    <div class="table-style">
      <Table border :columns="activityColumns" :data="activityData" :loading="tableLoading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" class="btn-style" @click="editActivity(row)">编辑计划</Button>
          <Button type="success" size="small" class="btn-style" @click="addPlot(row)">添加策划</Button>
          <Button type="warning" size="small" @click="viewDetails(row)">查看详情</Button>
        </template>
      </Table>
      <activity-option :is-show="activityModel" :modalTitle="activityTitle" :formData="formData"
                       :row-id="rowID" @cancel="cancel" @saveHandle="saveSubmit">
      </activity-option>
      <activity-detail :showDetail="detailModal" :form-data="formData" @cancel="cancel"></activity-detail>
      <plot-option-add :is-show="plotModal" :modalTitle="plotTitle" :formData="formPlot" @cancel="cancel" @saveHandle="savePlot"></plot-option-add>
    </div>
    <div class="page">
      <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
            :total="pageObj.totalRecord"
            @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
    </div>
  </div>
</template>
<script>
import { getActivityPlanList } from '@/api/activity'
import ActivityOption from './components/activity-option/index'
import ActivityDetail from './components/activity-detail/index'
import PlotOptionAdd from './components/plot-option-add/index'
export default {
  name: 'ActivityPlan',
  props: {
    index: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  components: { PlotOptionAdd, ActivityDetail, ActivityOption },
  data () {
    return {
      searchObj: {},
      activityColumns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'

        },
        {
          title: '活动主题',
          key: 'activity_theme',
          align: 'center'
        },
        {
          title: '活动目的',
          key: 'activity_objective',
          align: 'center'
        },
        {
          title: '活动要求',
          key: 'activity_requirement',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
      activityData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      activityModel: false,
      activityTitle: '',
      formData: {},
      rowID: '',
      detailModal: false,
      plotModal: false,
      plotTitle: '',
      formPlot: {}
    }
  },
  methods: {
    searchAction () {
      this.init()
    },
    init () {
      this.tableLoading = true
      const param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        activity_theme: this.searchObj.activity_theme
      }
      getActivityPlanList(param).then(ret => {
        const data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.activityData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    addActivity () {
      this.activityModel = true
      this.activityTitle = '添加活动'
      this.formData = {}
    },
    editActivity (row) {
      this.activityModel = true
      this.activityTitle = '编辑活动'
      this.formData = row
    },
    addPlot (val) {
      console.log(val, '策划数据')
      this.plotModal = true
      this.plotTitle = '添加活动策划'
      this.formPlot = val
    },
    savePlot () {
      this.plotModal = false
      this.$emit('addPlot')
    },
    cancel () {
      this.activityModel = false
      this.detailModal = false
      this.plotModal = false
    },
    saveSubmit () {
      this.activityModel = false
      this.init()
    },
    viewDetails (row) {
      this.detailModal = true
      this.formData = row
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageObj.pageSize = pageSize
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '添加成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
  .btn-style {
    margin-right: 10px;
  }

  .table-style {
    margin-top: 10px;
  }

  .page {
    text-align: right;
    margin-top: 10px
  }

  /deep/ .ivu-table-overflowX {
    overflow-x: hidden;
  }
</style>
